<!--
 * @Author: Bonnie
 * @Date: 2021-12-03 15:16:38
 * @LastEditTime: 2021-12-03 15:23:18
 * @LastEditors: Bonnie
 * @Description: 
 * @FilePath: /public_demo/src/views/edit_div/index.vue
-->
// 可编辑div
<template>
  <div class="root-container">
    <p>当input或者textarea满足不了的时候，可使用div</p>
    <br/>
    <p>下面的输入框就是用div实现的 仅能粘贴文本</p>
    <div class="em-hover underline m10 cursor-pointer btn" @click="changeType">点击我切换状态</div>
    <div>
      当前div的
      <em>contenteditable</em>状态为：
      <i>{{contentType.type}}</i>
      <em class="ml10">{{contentType.descr}}</em>
    </div>
    <div id="edit-div" class="edit-div p10 m10" :contenteditable="contentType.type"></div>
    <div class="mt10">
      踩坑记录：
      <em class="cursor-pointer em-hover underline" @click="toCSDN">使用 可编辑div 遇到的坑</em>
    </div>
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  props: [],
  data() {
    return {
      contentType: {},
      typeList: [
        {
          id: 0,
          type: "plaintext-only",
          descr: "仅能复制文本"
        },
        {
          id: 1,
          type: "true",
          descr: "可复制带有标签、样式的文本"
        },
        {
          id: 2,
          type: "false",
          descr: "禁止操作"
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.contentType = this.typeList[0];
  },
  methods: {
    changeType() {
      let ele = document.getElementById("edit-div");
      ele.innerHTML = "";
      const id = this.contentType.id;
      this.contentType = this.typeList[id != 2 ? id + 1 : 0];
    },
    toCSDN() {
      window.open(
        "https://blog.csdn.net/Dark_programmer/article/details/112172274?spm=1001.2014.3001.5501",
        "_blank"
      );
    }
  }
};
</script>
<style lang='scss' scoped>
.root-container {
  color: black;
}
.btn {
  width: 120px;
  display: inline-block;
}
.edit-div {
  width: 500px;
  height: 300px;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid #b2b6b6;
  outline: none;
}
i {
  color: red;
  font-style: normal;
}
</style>